<template>
  <div>
    <router-view v-if="route.matched.length === 3" />
    <template v-else>
      <search-box @search="loadData" @reset="handleReset">
        <div style="display: flex">
          <search-input search-text="Client Name">
            <a-input v-model:value="searchStruct.clientName" />
          </search-input>
          <search-input search-text="Type">
            <a-select v-model:value="searchStruct.type" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option :value="-1" label="All">All</a-select-option>
              <a-select-option :value="2" label="Direct">Direct</a-select-option>
              <a-select-option :value="1" label="MLV">MLV</a-select-option>
            </a-select>
          </search-input>
          <search-input search-text="History">
            <a-select v-model:value="searchStruct.history" :get-popup-container="triggerNode => triggerNode.parentNode">
              <a-select-option :value="1" label="Yes">Yes</a-select-option>
              <a-select-option :value="0" label="No">No</a-select-option>
            </a-select>
          </search-input>
        </div>
      </search-box>
      <e-container style="margin-top: 24px">
        <a-spin :spinning="loading">
          <a-table
            class="ant-table-striped"
            :columns="Columns"
            :data-source="listData"
            :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
            row-key="id"
            table-layout="fixed"
            :pagination="pageOption"
            @change="handleTableChange"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'details'">
                <a-space :size="32">
                  <a-space
                    style="color: #3c6cfe; cursor: pointer"
                    @click="
                      router.push({
                        name: 'Blacklist Operation History',
                        params: { id: record.clientID, name: record.fullName }
                      })
                    "
                  >
                    <e-icon type="records" />Detail
                  </a-space>
                  <!--
                  <a-space
                    v-if="canDelete"
                    style="color: #fc4b3b; cursor: pointer"
                    @click="() => showConfirmRemoveDialog(record.clientID)"
                  >
                    <e-icon type="delete" />Delete
                  </a-space>
                  -->
                </a-space>
              </template>
            </template>
            <template #emptyText><e-empty /></template>
          </a-table>
        </a-spin>
      </e-container>
    </template>
    <confirm-remove v-model:show="showRemove" :client-id="clientId" @updated="loadData" />
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import SearchBox from '../../components/Search.vue'
import SearchInput from '../../components/SearchInput.vue'
import EContainer from '@/components/EContainer.vue'
import ConfirmRemove from './components/ConfirmRemove.vue'
import Columns from './columns.js'
import Blacklist from '@/api/blacklist.js'
const route = useRoute()
const router = useRouter()
const loading = ref(false)
const listData = ref([])
const canDelete = ref(false)
const showRemove = ref(false)
const clientId = ref(null)
const searchStruct = reactive({
  clientName: '',
  type: -1,
  history: 0,
  page: { pageRows: 10, pageIndex: 1, total: 0, sort: undefined, order: undefined }
})
const pageOption = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: false,
  onChange(value) {
    this.current = value
    searchStruct.page.pageIndex = value
    loadData()
  }
})
const loadData = () => {
  canDelete.value = searchStruct.history !== 1
  Blacklist.list(searchStruct)
    .then(res => {
      listData.value = res.data
      pageOption.total = res.total
    })
    .finally(() => {
      loading.value = false
    })
}
const handleReset = () => {
  searchStruct.clientName = ''
  searchStruct.type = -1
  searchStruct.history = 0
  searchStruct.page = { pageRows: 10, pageIndex: 1, total: 0, sort: undefined, order: undefined }
  pageOption.current = 1
  loadData()
}
loadData()
const handleTableChange = (page, filters, sorter) => {
  searchStruct.page.sort = sorter.order === undefined ? undefined : sorter.columnKey
  searchStruct.page.order = sorter.order === undefined ? undefined : sorter.order.substring(0, sorter.order.length - 3)
  loadData()
}
const showConfirmRemoveDialog = id => {
  clientId.value = id
  showRemove.value = true
}
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
.search-item {
  .ant-input,
  .ant-select {
    width: 240px;
  }
}
</style>

<route lang="yaml">
name: Blacklist Index
path: '/blacklist/'
meta:
  title: Blacklist
  roles: isPrimaryCSO
</route>
